<template>
  <div class="menu-container">
    <th-menus :data="data.menus">菜单</th-menus>
  </div>
  <div class="markdown-container">
    <Markdown :source="source" />
  </div>
</template>
<script lang="ts" setup>
import ThMenus from "@lib/Menus";
import { reactive } from "vue";
import Markdown from "vue3-markdown-it";
const data = reactive({
  menus: [
    {
      name: "菜单1",
      link: "/menu",
      desc: "菜单组件",
    },
    {
      name: "菜单2",
      link: "/menu",
      desc: "菜单组件",
      children: [
        {
          name: "菜单2-1",
          link: "/menu",
          desc: "菜单组件2-1",
        },
        {
          name: "菜单2-2",
          link: "/menu",
          desc: "菜单组件2-2",
          children: [
            {
              name: "菜单2-2-1",
              link: "/menu",
              desc: "菜单组件2-2-1",
            },
          ],
        },
        {
          name: "菜单2-3",
          link: "/menu",
          desc: "菜单组件3",
        },
      ],
    },
    {
      name: "菜单3",
      link: "/menu",
    },
  ],
});

const source = `
#### :sparkles: 菜单组件引入 :sparkles:

    import ThMenus from "@lib/Menus";
    
#### :sparkles: 菜单组件使用 :sparkles:
template:

    <th-menus :data="data.menus">菜单</th-menus>

js/ts:

    const data = reactive<Record<string, any>>({
      menus: [
        {
          name: "菜单1",
          link: "/menu",
          desc: "菜单组件",
        },
        {
          name: "菜单2",
          link: "/menu",
          desc: "菜单组件",
          children: [
            {
              name: "菜单2-1",
              link: "/menu",
              desc: "菜单组件2-1",
            },
            {
              name: "菜单2-2",
              link: "/menu",
              desc: "菜单组件2-2",
              children: [
                {
                  name: "菜单2-2-1",
                  link: "/menu",
                  desc: "菜单组件2-2-1",
                },
              ],
            },
            {
              name: "菜单2-3",
              link: "/menu",
              desc: "菜单组件3",
            },
          ],
        },
        {
          name: "菜单3",
          link: "/menu",
        },
      ],
    });
`;
</script>
<style lang="scss" scoped>
.menu-container {
  width: 300px;
  border: 1px solid rgb(145, 2, 211);
}
</style>
